<template>
  <div
      id="IdTimeBar"
      style="height: 500px; width: 100%"
  ></div>
</template>

<script lang="ts" setup>
import { changeTimeUnit } from "@/utils";
import * as echarts from "echarts";
import { BarSeriesOption } from "echarts/charts";
import { TooltipComponentOption, LegendComponentOption } from "echarts/components";
import { onMounted, watch } from "vue";

type EChartsOption = echarts.ComposeOption<TooltipComponentOption | LegendComponentOption | BarSeriesOption>;
const props = defineProps(["data"]);
const getOption = () => {
  // const data = props.data;
  // // console.log(data,"+++++++++++++++")
  // let number = 0;
  // for (const dataKey of data) {
  //   number += dataKey.value;
  // }
  const p: EChartsOption = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // Use axis to trigger tooltip
        type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
      },
      valueFormatter: value => {
        if (typeof value == "number") {
          // console.log(changeTimeUnit(value))
          const s = changeTimeUnit(value);
          return s  === "0分钟"?"":s ;
        } else return value.toString();
      },
    },
    legend: {},
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
    },
    yAxis: {
      type: "category",
      data: props.data.timeRange, // ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    series: props.data.series.map((value:any) => {
      return {
        name: value.name,
        type: "bar",
        stack: "total",
        label: {
          show: true,
          formatter: (params:any) => {
            const value = params.data;
            if (typeof value == "number") {
              // console.log(changeTimeUnit(value))
              const s = changeTimeUnit(value);
              return s  === "0分钟"?"":s ;
            } else return value.toString();
          },
        },
        emphasis: {
          focus: "series",
        },
        data: value.takeTimeList,
      };
    }),
  };
  return p;
};
let IdTimeBar:any|undefined = undefined;
let option: EChartsOption = getOption();

/**
 *   {
 *         name: 'Direct',
 *         type: 'bar',
 *         stack: 'total',
 *         label: {
 *           show: true,
 *           formatter:(params)=>{
 *             const value = params.data;
 *             if(typeof value == "number" ) {
 *               // console.log(changeTimeUnit(value))
 *               return changeTimeUnit(value)
 *             }
 *             else return value.toString()
 *           }
 *         },
 *         emphasis: {
 *           focus: 'series'
 *         },
 *         data: [0, 302, 301, 334, 390, 330, 320]
 *       },
 */
onMounted(() => {
  const el = document.getElementById("IdTimeBar")
  if(el){
    IdTimeBar = echarts.init(el);
    IdTimeBar.setOption(option);
  }

});
watch(props, () => {
  option = getOption();
  // console.log(option,props.data,"++++++++++++++")
  // IdTimeBar = echarts.init(document.getElementById("IdTimeBar"));
  IdTimeBar.setOption(option);
});
</script>
